<template>
  <div class="detailContainer">
    <div class="displayArea">
      <div class="title">{{ titleList[titleIndex] }}</div>
      <div class="televisionItem">
        <img :src="televisionDetail.items[0].img_url" />
        <div class="textArea">
          <i>{{ televisionDetail.items[0].product_name }}</i>
          <span>{{ televisionDetail.items[0].product_brief }}</span>
          <strong class="price"
            >¥{{ televisionDetail.items[0].product_price }}</strong
          >
          <div class="immediately">立即购买</div>
        </div>
      </div>
      <div class="televisionItem">
        <img :src="televisionDetail.items[1].img_url" />
        <div class="textArea">
          <i>{{ televisionDetail.items[1].product_name }}</i>
          <span>{{ televisionDetail.items[1].product_brief }}</span>
          <strong class="price"
            >¥{{ televisionDetail.items[1].product_price }}</strong
          >
          <div class="immediately">立即购买</div>
        </div>
      </div>
      <div
        class="televisionItem_small"
        v-for="(televisionItem, index) in televisionDetail.items.slice(2)"
        :key="index"
      >
        <img :src="televisionItem.img_url" />
        <div class="textArea">
          <i>{{ televisionItem.product_name }}</i>
          <span>{{ televisionItem.product_brief }}</span>
          <strong class="price">¥{{ televisionItem.product_price }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TelevisionClass",
  props: ["titleId", "televisionDetail"],
  data() {
    return {
      titleList: [
        "明星爆款 热卖推荐",
        "明星新品专区",
        "全面屏专区",
        "听话的电视",
        "更多好物推荐",
      ],
    };
  },
  computed: {
    titleIndex() {
      return this.titleId - 1;
    },
  },
};
</script>

<style scoped lang="less">
.title {
  width: 2.5rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  color: #fff;
  margin: 0.1rem 0;
  border-radius: 0.18rem;
  background-color: #fd5a45;
  font-size: 0.2rem;
}
.displayArea {
  width: 3.75rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: #ffae99;
  .televisionItem {
    width: 47%;
    margin: 0.05rem 0;
    img {
      width: 1.76rem;
      border-radius: 0.04rem;
      display: block;
    }
    .textArea {
      width: 1.76rem;
      font-size: 0.12rem;
      box-sizing: border-box;
      padding: 0.04rem 0.04rem;
      background-color: #fff;
      border-radius: 0 0 0.03rem 0.04rem;
      i {
        font-weight: 700;
        color: #3c3c3c;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
      }
      span {
        color: #3c3c3c;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        margin: 0.03rem 0;
      }
      strong {
        color: rgb(245, 75, 75);
        font-weight: 700;
        font-size: 0.15rem;
        display: block;
        width: 100%;
        text-align: center;
      }
      .immediately {
        background-color: #f54b4b;
        color: #fff;
        margin: 0 0.4rem 0.1rem 0.4rem;
        width: 0.91rem;
        height: 0.25rem;
        line-height: 0.25rem;
        text-align: center;
        border-radius: 0.03rem;
      }
    }
  }
  .televisionItem_small {
    width: 30%;
    margin: 0.04rem 0;
    img {
      width: 1.151rem;
      border-radius: 0.04rem;
      display: block;
    }
    .textArea {
      width: 1.151rem;
      font-size: 0.12rem;
      box-sizing: border-box;
      padding: 0.04rem 0.04rem;
      background-color: #fff;
      border-radius: 0 0 0.03rem 0.04rem;
      i {
        font-weight: 700;
        color: #3c3c3c;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
      }
      span {
        color: #3c3c3c;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        margin: 0.03rem 0;
      }
      strong {
        color: rgb(245, 75, 75);
        font-weight: 700;
        font-size: 0.15rem;
        display: block;
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>